:root {
    --primary-color: #1890ff;
    --error-color: #ff4d4f;
    --gutter-base: 8px;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.registration-container {
    max-width: 600px;
    margin: 0 auto;
    padding: calc(var(--gutter-base) * 2);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn {
    height: 48px;
    transition: all 0.2s var(--ease-in-out);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    opacity: 0.85;
}

.form-control {
    height: 48px;
}

.form-control.is-invalid {
    animation: shake 0.6s var(--bounce);
    border-color: var(--error-color);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

@media (max-width: 768px) {
    .registration-container {
        margin: var(--gutter-base);
    }
}